<template>
    <view class="gy-image" :style="customStyle">
    	<image v-if="props.src && !showDefault" class="gy-image" :style="customStyle" :src="proxy.utils.image.fullPath(props.src)" :mode="props.mode" :show-menu-by-longpress="showMenuByLongpress" @error="showDefaultFn" @tap="previewFn"></image>
		<view v-else class="gy-image-default">
			<image :src="proxy.utils.image.fullPath('250efad3e09595bf9988eada80a8fc7598effbefa9a74a6368a26965c0040b24.png')" :style="customDefaultStyle" mode="widthFix"></image>
		</view>
    </view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed,
		getCurrentInstance
    } from "vue";

	const { proxy }: any = getCurrentInstance();
	
    const props = defineProps({
    	src: {
    		type: String
    	},
        srcs: {
        	type: Array,
			default: []
        },
        mode: {
        	type: String,
            default: "widthFix"
        },
		preview: {
			type: Boolean,
		    default: false
		},
		width: {
			type: Number
		},
    	height: {
    		type: Number
    	},
    	radius: {
    		type: Number,
    		default: 10
    	},
		showMenuByLongpress: {
			type: Boolean,
		    default: false
		}
    });

    const showDefault = ref(false);

    const customStyle = computed(() => {
        let obj: any = {
            borderRadius: props.radius + 'rpx'
        }
        if(props.mode === "widthFix" && props.width){
            obj.width = props.width + 'rpx';
        }
		if(props.mode === "heightFix" && props.height){
		    obj.height = props.height + 'rpx';
		}
		if(props.mode === ""){
			if(props.width){
				obj.width = props.width + 'rpx';
			}
			if(props.height){
				obj.height = props.height + 'rpx';
			}
		}
        return obj;
    })
	const customDefaultStyle = computed(() => {
		let obj: any = {};
		if(props.width && props.height){
			if(props.width === props.height){
				obj.width = props.width / 2 + 'rpx';
				obj.height = props.height / 2 + 'rpx';
			}
			if(props.width > props.height){
				obj.width = props.height / 2 + 'rpx';
				obj.height = props.height / 2 + 'rpx';
			}
			if(props.width < props.height){
				obj.width = props.width / 2 + 'rpx';
				obj.height = props.width / 2 + 'rpx';
			}
		}
	    return obj;
	})

    function showDefaultFn(){
        showDefault.value = true;
    }

    function previewFn(){
        if(props.preview && !showDefault.value){
            let urls: Array<string> = [];
            props.srcs.forEach((item: string) => {
                urls.push(proxy.utils.image.fullPath(item));
            })
            let url = proxy.utils.image.fullPath(props.src);
            if(urls.length === 0){
                urls = [url]
            }
			uni.previewImage({
			    current: url,
			    urls: urls
			})
        }
    }

</script>

<style lang="scss" scoped>
	.gy-image{
		width: 100%;
		overflow: hidden;
		@include flex-center-center;
		image{
		    display: block;
		    max-width: 100%;
			max-height: 100%;
		}
		.gy-image-default{
			width: 100%;
			height: 100%;
			@include flex-center-center;
			background-color: var(--gy-page-bg-color);
			image{
			    width: 50%;
				max-width: 90rpx;
			}
		}
	}
</style>